<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Round Corners - JavaScript injection</title>
<script type="text/javascript">
var djConfig = {
    isDebug: true,
    parseOnLoad: true,
    locale: "zh",
    extraLocale: ["en"]
};
</script>
<script type="text/javascript" src="../../lib/dojo/dojo/dojo.js"></script>
<style type="text/css">
@import "rounded-corners.css";

div.box {
    margin: 10px 0;
}

#login_box {
    width: 236px;
}
</style>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.date.locale");
dojo.require("dojo.parser");
dojo.require("dijit.Dialog");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.FilteringSelect");

dojo.addOnLoad(function() {
    console.debug("loaded");

    function curvyCorners(query, settings) {
        var nodes = dojo.query(query);

        dojo.forEach(nodes, function(node) {
            var contents = node.innerHTML;
            var contentNode = dojo.create("div", {
                "class": "rounded-content"
            });
            contentNode.innerHTML = contents;

            if (dojo.isIE) {
                dojo.removeClass(node, "rounded");
                dojo.addClass(node, "rounded-box");
    
                dojo.empty(node);
                dojo.place('<span class="top-left"></span>', node);
                dojo.place('<span class="top-right"></span>', node);
                dojo.place('<span class="top-border"></span>', node);
                dojo.place('<span class="left-border"></span>', node);
                dojo.place('<span class="right-border"></span>', node);
                dojo.place('<span class="bottom-left"></span>', node);
                dojo.place('<span class="bottom-right"></span>', node);
                dojo.place('<span class="bottom-border"></span>', node);
                dojo.place(contentNode, node);
            } else {
                dojo.addClass(node, "rounded-borders");
            }
        });
    }

    curvyCorners(".rounded", null);
});
</script>
</head>
<body>
  <div class="box rounded">
    <!-- CONTENT BEGIN -->
    <div>this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text</div>
    <div>this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text</div>
    <!-- CONTENT END -->
  </div>

  <div class="rounded" style="width: 400px; height: 100px; float: left;">
    <!-- CONTENT BEGIN -->
    <div>this is the test demo for javascript!</div>
    <!-- CONTENT END -->
  </div>

  <!-- login box -->
  <div id="login_box" class="rounded" style="float: right">
    <div class="login-box-top">
      <h1>Sign In</h1>
    </div>
    <div class="login-box-content">
      <form method="post" action="j_security_check">
        <div><label class="login-label" for="j_username">Username:</label></div>
        <div><input type="text" size="30" name="j_username" id="j_username" /></div>
        <div>(e.g., joe@gmail.com)</div>
        <div><br /></div>
        <div><label class="login-label" for="j_password">Password:</label></div>
        <div><input type="password" size="30" name="j_password" id="j_password" /></div>
        <div><a href="http://w3.ibm.com/password">Forgot your password?</a></div>
        <div><br /></div>
        <div class="right">
          <button dojoType="dijit.form.Button" type="submit" class="button-blue">Submit</button>
        </div>
        <div class="clear-box"></div>
      </form>
    </div>
    <div class="login-box-bottom"></div>
  </div>
</body>
</html>
